<template>
  <div class="todo">
    <div class="title" v-if="title" @click="showDate">
      <span></span>
      <span class="name">{{title}}</span>
      <span class="btn" @click.stop="reset">重置</span>
    </div>
    <div v-else class="title none" @click="showDate">
      选择时间
    </div>
    <div  @click="showUsers" class="users white-block">
      <span class="label">人员筛选</span>
      <span class="name">{{userName}}</span>
      <span class="btn" style="color: red" @click.stop="resetUser" v-if="userId">重置</span>
      <span class="btn" style="color: red" v-else>选择</span>
    </div>

    <calendar mode="during"  @change="changeDate"  :show.sync="dateShow"  />

    <div class="todos">
      <div  class="todo white-block"  v-for="todo in sumUserList" :key="todo.id">
        <span class="name">{{str2Date(todo.joinDate).toLocaleDateString()}}</span>
        <span class="name">{{todo.name}}</span>
        <span class="name">{{userMap[todo.pid].name}}</span>
        <!--        <span class="del" @click.stop="del(todo.id)" v-if="todo.status==0" style="color: red">删除</span>-->
        <span class="status">{{statusText[todo.status]}}</span>
      </div>
    </div>
    <!--    <div class="btns">-->
    <!--      <div class="left-btn btn">-->
    <!--        修改任务-->
    <!--      </div>-->
    <!--      <div class="right-btn btn">-->
    <!--        历史查询-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { parseTime, str2Date } from '@/util/time'
import { sTop, gtBusUser, sumByTop } from '@/api/user'
export default {
  created () {
    // 获取数据
    this.init()
    this.getUsers()
  },
  methods: {
    init () {
      sumByTop(parseTime(this.dateStart), parseTime(this.dateEnd), this.userId).then(res => {
        this.sumUserList = res.data
      })
    },
    gtBusUser () {
      gtBusUser().then(res => {
        this.users = res.data
      })
    },
    str2Date (date) {
      return str2Date(date)
    },
    showTitles () {
      const tem = []
      const titles = []
      this.todos.forEach(todo => {
        if (tem.indexOf(todo.title) < 0) {
          tem.push(todo.title)
          const m = { text: todo.title, value: todo.title }
          titles.push(m)
        }
      })
      // console.log(titles)
      if (!this.tpicker) {
        this.tpicker = this.$createCascadePicker({
          title: '选择会员',
          data: titles,
          onSelect: this.selectTitle
        })
      }
      this.tpicker.show()
    },
    selectTitle (val) {
      this.titleFilter = val.join()
    },
    resetTitleFilter () {
      this.titleFilter = null
    },
    showUsers () {
      const users = this.users.map(v => {
        const m = { text: v.name, value: v.id }
        return m
      })
      if (!this.picker) {
        this.picker = this.$createCascadePicker({
          title: '选择用户',
          data: users,
          onSelect: this.selectUser
        })
      }
      this.picker.show()
    },
    selectUser (selectedVal, selectedIndex, selectedText) {
      this.userId = selectedVal[0]
      this.userName = selectedText[0]
      console.log(this.userName)
      this.init()
    },
    getUsers () {
      sTop().then(res => {
        this.users = res.data
      })
    },
    resetUser () {
      this.userId = null
      this.userName = null
      this.init()
    },
    reset () {
      this.dateStart = null
      this.dateEnd = null
      this.init()
    },
    showDate () {
      this.dateShow = true
    },
    changeDate (dates) {
      if (dates.length === 2) {
        this.dateStart = dates[0].toDate().toLocaleDateString()
        this.dateEnd = dates[1].toDate().toLocaleDateString()
        this.dateShow = false
        this.init()
      }
    },
    detail (item) {
      let path = '/todo/visit'
      if (item.type === 0 || item.type === 3) {
        path = '/todo/visit'
        if (item.status !== 0) {
          path = '/score/visit'
        }
      }

      if (item.type === 1 || item.type === 4) {
        path = '/todo/send'
        if (item.status !== 0) {
          path = '/score/send'
        }
      }

      if (item.type === 2 || item.type === 5) {
        path = '/todo/act'
        if (item.status !== 0) {
          path = '/score/act'
        }
      }

      if (item.type === 6) {
        path = '/todo/head'
        if (item.status !== 0) {
          path = '/score/head'
        }
      }
      if (item.type === 6 || item.type === 7) {
        path = '/todo/head'
        if (item.status !== 0) {
          path = '/score/head'
        }
      }

      if (item.type === 8) {
        path = '/todo/hunt'
        if (item.status !== 0) {
          path = '/score/hunt'
        }
      }

      if (item.type === 9) {
        path = '/todo/other'
        if (item.status !== 0) {
          path = '/score/other'
        }
      }

      this.$router.push({
        path: path,
        query: { id: item.id }
      })
    },
    // del (item) {
    //   showConfirm('确定删除吗?', '将删除所有未完成项目').then(res => {
    //     if (!res) return
    //     delAll(this.date, item.type).then(() => {
    //       showAlert('操作成功!').then(() => {
    //         this.init()
    //       })
    //     })
    //   })
    // },
    toDetail (item) {
      if (item.have) {
        this.toAdd(item.type)
      }
    },
    toAdd (type) {
      this.$router.push({
        path: '/todo/add',
        query: {
          planId: this.planId,
          date: this.date,
          type: type,
          name: this.name
        }
      })
    }
  },
  computed: {
    userMap () {
      const mp = {}
      if (!this.users) {
        return null
      }
      Object.values(this.users).forEach(l => {
        mp[l.id] = l
      })
      return mp
    },
    title () {
      if (this.dateStart != null && this.dateEnd != null) {
        if (this.dateStart === this.dateEnd) {
          return this.dateStart + ' ' + this.weekName[new Date(this.dateStart).getDay()]
        } else {
          return this.dateStart + '--' + this.dateEnd
        }
      }
      return null
    },
    statusOptions () {
      const statusOptions = [{
        name: '待完成', num: 0
      },
      {
        name: '待考核', num: 0
      },
      {
        name: '已评分', num: 0
      }
      ]
      this.todos.forEach(todo => {
        if (statusOptions[todo.status]) {
          statusOptions[todo.status].num++
        }
      })
      return statusOptions
    },
    types () {
      const map = {}
      this.todos.forEach(todo => {
        let val
        if (map[todo.type]) {
          val = map[todo.type]
        } else {
          val = {
            name: this.typeText[todo.type],
            have: true,
            type: todo.type,
            num: 0,
            done: 0,
            score: 0,
            wait: 0
          }
        }
        if (todo.status === 0) {
          val.wait++
        }
        if (todo.status === 1 || todo.status === 4) {
          val.done++
        }
        if (todo.status === 2) {
          val.score++
        }
        map[todo.type] = val
      })
      return Object.values(map)
    },
    // const types = this.typeList.map((m, k) => {
    //   return { name: m.name, have: false, type: m.value, num: 0, done: 0, score: 0, wait: 0 }
    // })
    // types.forEach(type => {
    //   type.num = 0
    //   type.have = false
    //   this.todos.forEach(todo => {
    //     // 筛选时间 类型
    //     if (todo.type === type.type) {
    //       type.have = true
    //       type.num++
    //       if (todo.status === 0) {
    //         type.wait++
    //       }
    //       if (todo.status === 1) {
    //         type.done++
    //       }
    //       if (todo.status === 2) {
    //         type.score++
    //       }
    //     }
    //   })
    // })
    // return types
    // },
    todoListOther () {
      return this.todos.filter(todo => {
        let statusFlag = true
        let typeFlag = true
        if (this.titleFilter && todo.title != this.titleFilter) {
          return false
        }
        if (this.filterStatus.length > 0) {
          statusFlag = this.filterStatus.indexOf(todo.status) > -1
        }
        if (this.filterTypes.length > 0) {
          typeFlag = this.filterTypes.indexOf(todo.type) > -1
        }
        return typeFlag && statusFlag
      })
    }
  },
  data () {
    return {
      users: null,
      sumUserList: [],
      top: false,
      userId: null,
      userName: null,
      titleFilter: null,
      typeList: [],
      statusText: ['待完成', '待考核', '已评分', '已删除', '待评分'],
      weekName: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      typeText: ['拜访', '发放', '活动', '拜访-帮带', '发放-帮带', '活动-帮带', '总部拜访', '连锁开发', '人员招聘', '其它'],
      dateShow: false,
      filterTypes: [],
      filterStatus: [],
      todos: [],
      name: null,
      dateStart: null,
      dateEnd: null,
      planId: null
    }
  }
}
</script>

<style scoped lang="stylus">
.check-box
  display flex
  align-items center
  justify-content center
  .label
    margin-right 10px
.todo
  padding 10px 10px
  .title
    padding 0 10px
    display flex
    justify-content space-between
    align-items center
    height 60px
    color #55545D
    font-size 22px
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
    .btn
      color red
      font-size 14px
    &.none
      justify-content center
  .users
    padding 0 10px
    display flex
    align-items center
    justify-content space-between
    font-size 16px
    color #55545D
    margin-top 10px
  .time-filter
    padding 0 10px
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    align-items center
    margin-top 20px

    .place
      font-size 16px
      color red
  .types
    border-top 1px solid #ECEAEA
    margin-top 20px
    padding-bottom 20px
    .desc
      display flex
      align-items center
      justify-content center
      font-size 10px
      color #989898
      padding 10px 0
    .total
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      color #55545D
    .type
      margin-bottom 10px
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      background-color #ECEAEA
      color #55545D
      .type-name
        min-width 80px
      .del
        color red
      .type-edit
        color red
      .radios
        display flex
        align-items center
        input
          margin-right 10px
        .false
          margin-left 20px
      &.done
        background-color white
      .week-date
        color #595857
  .btns
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    position fixed
    bottom 10px
    left 0
    right 0
    padding 0 10px
    .btn
      background-color white
      border 1px 1px 1px 1px solid #595857
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      width 100px
      height 40px
      display flex
      justify-content center
      align-items center
  .todos
    border-top 1px solid #ECEAEA
    padding-top 20px
    .todo
      font-size 14px
      color #55545D
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      margin-bottom 10px
      &.done
        background-color #ECEAEA
</style>
